<template>
  <publicPage isNavbar isMinusKeyHeight>
    <view slot="navbar">
      <u-navbar
        :placeholder="true"
        bgColor="#2DBCBE"
        leftIconColor="#FFFFFF"
        autoBack
      >
        <view slot="center" class="colorF">
          <view class="fz-14 tc">{{conversationName}}</view>
          <view v-if="com" class="fz-10 tc">{{com}}</view>
        </view>
      </u-navbar>
    </view>

    <view class="container">
      <view class="group-profile"
        ><TUI-group-profile
          v-if="isShow"
          id="groip-profile"
          :conversation="conversation"
      /></view>
      <view class="message-list" @tap="triggerClose"
        ><TUI-message-list
          id="message-list"
          ref="messageList"
          :conversation="conversation"
      /></view>
      <u-overlay :show="videoPlay" @click="stopVideoHander">
        <view style="height:100%;" class="disFlxCC">
          <video
            v-if="videoPlay"
            @tap.stop
            class="video-message"
            :src="videoMessage.payload.videoUrl"
            :poster="videoMessage.payload.thumbUrl"
            object-fit="contain"
            error="videoError"
            autoplay="true"
            direction="0"
          />
        </view>
	    </u-overlay>
      <view v-if="showChat" class="message-input">
        <TUI-message-input
          id="message-input"
          ref="messageInput"
          :conversation="conversation"
          @inputBindFocus="inputBindFocus"
          @sendMessage="sendMessage"
        />
      </view>
    </view>
  </publicPage>
</template>

<script>
import logger from "../../utils/im/logger";
import TUIMessageList from "../components/tui-chat/message-list/index";
import TUIMessageInput from "../components/tui-chat/message-input/index";
import TUIGroupProfile from "../components/tui-group/group-profile/index";
import orderApi from "@/api/order.js";

export default {
  components: {
    TUIMessageList,
    TUIMessageInput,
    TUIGroupProfile,
  },
  props: {},
  data() {
    return {
      conversationName: "",
      com: "",
      conversation: {},
      messageList: [],
      isShow: false,
      showChat: true,
      conversationID: "",
      videoPlay: false,
      videoMessage: {},
      config: {
        sdkAppID: "",
        userID: "",
        userSig: "",
        type: 1,
        tim: null,
      },
    };
  },
  created() {
    uni.$on("videoPlayerHandler", (value) => {
      this.videoPlay = value.isPlay;
      this.videoMessage = value.message;
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const that = this;
    const { conversationID } = options;
    that.conversationID = conversationID;
    uni.$TUIKit.setMessageRead({ conversationID }).then(() => {
      logger.log("TUI-chat | setMessageRead  | ok");
    });
    uni.$TUIKit.getConversationProfile(conversationID).then((res) => {
      const { conversation } = res.data;
      that.conversation = conversation;
      that.conversationName = that.getConversationName(conversation);
      that.isShow = conversation.type === "GROUP";
      orderApi.getExpertInfo({expertId: conversation.userProfile.userID}).then(res=>{
        that.com = res.data.com || ""
      })
    });
  },
  mounted() {},
  onUnload() {},
  methods: {
    stopVideoHander() {
      this.videoPlay = false;
    },
    getConversationName(conversation) {
      if (conversation.type === "@TIM#SYSTEM") {
        this.showChat = false;
        return "系统通知";
      }
      if (conversation.type === "C2C") {
        return (
          conversation.remark ||
          conversation.userProfile.nick ||
          conversation.userProfile.userID
        );
      }

      if (conversation.type === "GROUP") {
        return (
          conversation.groupProfile.name || conversation.groupProfile.groupID
        );
      }
    },
    sendMessage(event) {
      // 将自己发送的消息写进消息列表里面
      this.$refs.messageList.updateMessageList(event.detail.message);
    },
    triggerClose() {
      if (this.showChat) {
        this.$refs.messageInput.handleClose();
      }
    },
    inputBindFocus() {
      this.$refs.messageList.scrollToButtom()
    }
  },
};
</script>
<style>
@import "./chat.css";
</style>
